<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link rel="stylesheet" href="qunit.css" type="text/css" media="screen" />
	<script type="text/javascript" src="qunit.js"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
	<!-- End_Exclude -->

<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">

$(function(){

/*******************************************************************************
 * QUnit setup
 */
QUnit.log = function(result, message) {
  if (window.console && window.console.log) {
	  window.console.log(result +' :: '+ message);
  }
}

/*******************************************************************************
 * Tool functions
 */
function makeBenchWrapper(testName, callback) {
	return function() {
		var start = +new Date;
//        callback.apply(this, arguments);
		callback.call();
		var elap = +new Date - start;
		ok(true, testName + " took " + elap + " milliseconds");
	}
}


function benchmark(testName, callback) {
	// Execute callback immediately and log timing as test result.
	// This function should be called inside a test() function.
	makeBenchWrapper(testName, callback).call();
}


function timedTest(testName, callback) {
	// Same as test(testName, callback), but adds a timing assertion.
	test(testName, makeBenchWrapper(testName, callback));
}


function simulateClick(selector) {
	var e = document.createEvent("MouseEvents");
	e.initEvent("click", true, true);
	$(selector).each(function(){
		this.dispatchEvent(e);
	});
};


function addNodes(node, level1, level2, level3, forceUpdate) {
	if( forceUpdate != true )
		node.tree.enableUpdate(false);

	var key;
	for (var i=0; i<level1; i++) {
		key = "" + (i+1);
		var f = node.addChild({title: "Folder_" + key,
							   key: key,
							   isFolder: true
							   });
		for (var j=0; j<level2; j++) {
			key = "" + (i+1) + "." + (j+1);
			var d = f.addChild({title: "Node_" + key,
							  key: key
							  });
			for (var k=0; k<level3; k++) {
				key = "" + (i+1) + "." + (j+1) + "." + (k+1);
				d.addChild({title: "Node_" + key,
						  key: key
						  });
			}
		}
	}
	node.tree.enableUpdate(true);
}

/*******************************************************************************
 * Module Init
 */
module("Init");

test("Create dynatree", function() {
	$("#tree").dynatree({
		children: [
			{key: "_1", title: "Add 100 nodes (flat, force update)...", isFolder: true, isLazy: true, mode: "add100_flat_u" },
			{key: "_2", title: "Add 100 nodes (flat)...", isFolder: true, isLazy: true, mode: "add100_flat" },
			{key: "_3", title: "Add 1.000 nodes (flat)...", isFolder: true, isLazy: true, mode: "add1000_flat" },
			{key: "_4", title: "Add 1.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add1000_deep" },
			{key: "_5", title: "Add 10.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "add10000_deep" },
			{key: "_6", title: "Add 10.000 nodes (deep)...", isFolder: true, isLazy: true, mode: "addJsonFile" }
		],
		onSelect: function(node) {
			alert("You selected " + node.data.title);
		},
		onLazyRead: function(node) {
			var tree = node.tree;
			var start = +new Date;
			logMsg("Benchmarking mode='" + node.data.mode + "'...");
			switch( node.data.mode ) {
				case "add100_flat_u":
					addNodes(node, 100, 0, 0, true)
					break;
				case "add100_flat":
					addNodes(node, 100, 0, 0)
					break;
				case "add1000_flat":
					addNodes(node, 1000, 0, 0)
					break;
				case "add1000_deep":
					addNodes(node, 10, 10, 10)
					break;
				case "add10000_deep":
					addNodes(node, 10, 100, 10)
					break;
				case "addJsonFile":
					node.appendAjax({
						url: "sample-data2.json"
					});
					break;
				default:
					throw "Invalid Mode "+ node.data.mode;
			}
			logMsg("Benchmarking mode='" + node.data.mode + "' done: " + (+new Date - start) + " milliseconds");
			// Return true, to show we're finished
			return true;
		}
	});
});

/*******************************************************************************
 * Module Load
 */
module("Load");
/*
asyncTest("Expand lazy  nodes (simulated async click())", function() {
	var tree = $("#tree").dynatree("getTree");
	simulateClick("#dynatree-id-_2");
	start();
//    equals(tree.getNodeByKey("1").data.title, "Folder_1");
//    simulateClick("#dynatree-id-_2");
});

test(".expand() lazy  nodes", function() {
	var tree = $("#tree").dynatree("getTree");
	tree.getNodeByKey("_3").expand();
});
*/
test(".click() top level nodes", function() {
	expect(6);
	benchmark("add100_flat_u", function() {
		$("#dynatree-id-_1").click();
	});
	benchmark("add100_flat", function() {
		$("#dynatree-id-_2").click();
	});
	benchmark("add1000_flat", function() {
		$("#dynatree-id-_3").click();
	});
	benchmark("add1000_deep", function() {
		$("#dynatree-id-_4").click();
	});
	benchmark("add10000_deep", function() {
		$("#dynatree-id-_5").click();
	});
	benchmark("addJsonFile", function() {
		$("#dynatree-id-_6").click();
	});
});

timedTest(".click() add10000_deep", function() {
	$("#dynatree-id-_5").click();
});
/*
test("Load 100 nodes (flat)", function() {
	var parent  = $("#tree").dynatree("getTree").getNodeByKey("_1");
//    addNodes(parent, 100, 0, 0)
	ok( true, "all pass" );
});
*/
/*******************************************************************************
 * Module Cleanup
 */
module("Cleanup");
/*
test("Remove children", function() {
	var root = $("#tree").dynatree("getRoot");
	for(var i = 0; i<root.childList.length; i++)
		root.childList[i].removeChildren();
//  ok( true, "all pass" );
});
*/
// ---
});
</script>
</head>

<body class="example">
	<h1 id="qunit-header">Dynatree unit tests: benchmarks</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>

	<hr />

	<div id='tree'> </div>

 <!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>
